<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>
  <script type="text/javascript" src="${basePath}/resources/sg/tz_page.js"></script>
  <style>

    .box{height:360px;overflow:auto;}
    #userbox li{height:25px;padding:5px;border-bottom:1px dotted #ccc;}
    #userbox li .num{display:inline-block;max-width:60px;height:25px;text-align:right;padding:0 2px;}
    #userbox li .chk{position:relative;top:2px;}
    #userbox li:hover{background:#333;color:#fff;cursor:pointer;}
    #userbox li.on{background:#333;color:#fff;}

  </style>
<body>

     <div class="box">
      <%-- <a href="">全选</a>
       <a href="">反选</a>--%>
       <ul id="userbox">
         <c:forEach  items="${datas}" var="user" varStatus="uindex">
           <li>
             <span class="chk"><input type="checkbox" class="check" value="${user.id}" /></span>
             <span class="num">${uindex.count}:</span>
             ${user.username} &nbsp;&nbsp;  ${user.email}
           </li>
         </c:forEach>
       </ul>
     </div>


     <%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
     <script type="text/javascript" src="${basePath}/resources/sg/tz_page.js"></script>

    <script type="text/javascript">
        var tzUserRole = {
            init:function(){
              $("#userbox").find("li").on("click",function(){
                  $(this).toggleClass("on").find(".check").filter(function(){
                      $(this).prop("checked" , !$(this).prop("checked"));
                  });
              });
            },
            save:function(roleId){
              var arr = [];
              var $chcked = $("#userbox").find(".check:checked");
              if($chcked.length==0){
                loading("请选择一个用户进行操作...",4);
                return;
              }

              $chcked.each(function(){
                arr.push($(this).val());
              });

              tzAjax.request({
                  path:adminPath,
                  model:"role",
                  method:"saveUserRole" ,
                  success:function(data){
                    if(data=="success"){
                      loading("角色分配成功",4);
                      $chcked.parents("li").fadeOut("slow",function(){
                          $(this).remove();
                      });
                    }
                  }
              },{users:arr.toString(),rid:roleId});
            }
        };

        tzUserRole.init();
    </script>

</body>
</html>
